import { CalendarDays, Clock, Share2 } from "lucide-react";
import VisitCount from "@/components/visit-count";
import { useLanguage } from "@/context/language-provider";

interface ExamCardProps {
  date: string;
  weekday: string;
  time: string;
  name: string;
  englishName?: string;
  grade: string;
  majors: string | string[];
  onShare?: (url: string) => void;
}

export function ExamCard({ date, weekday, time, name, englishName, grade, majors, onShare }: ExamCardProps) {
  const { language, isInternational } = useLanguage();
  
  // 处理日期格式
  const formattedDate = date.replace(/-/g, '/');
  
  // 处理分享
  const handleShare = () => {
    if (onShare) {
      const url = `${window.location.origin}/submit?exam=${encodeURIComponent(name)}&examDate=${encodeURIComponent(formattedDate)}&grade=${encodeURIComponent(grade)}${isInternational ? '&int=true' : ''}`;
      onShare(url);
    }
  };

  // 获取显示的课程名称
  // 如果中文课程名称为空字符串或undefined，则使用英文课程名称作为fallback
  const displayName = name || englishName || "";

  name = name || englishName || "";

  if (isInternational) {

    date = date.replace("月", ".").replace("日", "");

    switch (weekday) {
      case "一":
        weekday = "Monday";
        break;
      case "二":
        weekday = "Tuesday";
        break;
      case "三":
        weekday = "Wednesday";
        break;  
      case "四":
        weekday = "Thursday";
        break;
      case "五":
        weekday = "Friday";
        break;
      case "六":
        weekday = "Saturday";
        break;
      case "日":
        weekday = "Sunday";
        break;
    }
  }
  
  return (
    <div className="modern-card hover-lift relative overflow-hidden h-full flex flex-col" style={{ borderTop: '4px solid hsla(var(--primary), 0.4)' }}>
      <div className="absolute -inset-1 blur-3xl opacity-40 pointer-events-none animate-pulse" style={{ 
        background: 'radial-gradient(circle at top left, rgba(59,130,246,0.6), transparent 70%), radial-gradient(circle at bottom right, rgba(249,115,22,0.6), transparent 70%)',
        filter: 'blur(20px)',
        transform: 'translate3d(0, 0, 0)'
      }}></div>
      <div className="absolute -top-4 -left-4 w-12 h-12 rounded-full opacity-30 bg-blue-500 blur-xl"></div>
      <div className="absolute -bottom-4 -right-4 w-12 h-12 rounded-full opacity-30 bg-orange-500 blur-xl"></div>
      
      <div className="relative z-10 flex flex-col flex-1">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-2">
          <div className="flex items-center space-x-2 text-sm" style={{ color: 'hsl(var(--foreground) / 0.6)' }}>
            <CalendarDays className="h-4 w-4" style={{ color: 'hsl(var(--primary) / 0.7)' }} />
            <span>{date} {weekday}</span>
          </div>
          <div className="flex items-center space-x-2 text-sm" style={{ color: 'hsl(var(--foreground) / 0.6)' }}>
            <Clock className="h-4 w-4" style={{ color: 'hsl(var(--primary) / 0.7)' }} />
            <span>{time}</span>
          </div>
        </div>
        
        <div className="flex-1 flex flex-col mb-4">
          <h3 className="font-semibold text-lg break-words">{displayName}</h3>
          <p className="text-sm font-medium mt-1" style={{ color: 'hsl(var(--primary) / 0.9)' }}>
            {grade}{language === "zh" ? "级" : ""}
          </p>
          <p className="text-sm mt-2 break-words line-clamp-2 min-h-[2.5rem]" style={{ color: 'hsl(var(--foreground) / 0.7)' }}>
            {majors}
          </p>
        </div>
        
        <div className="mt-auto pt-4 border-t flex flex-col sm:flex-row gap-2 justify-between" style={{ borderColor: 'hsl(var(--border) / 0.6)' }}>
          <a 
            href={`/submit?exam=${encodeURIComponent(name)}&examDate=${encodeURIComponent(formattedDate)}&grade=${encodeURIComponent(grade)}${isInternational ? '&int=true' : ''}`}
            className="text-sm rounded-lg px-4 py-1.5 transition-colors text-primary text-center backdrop-blur-sm w-full sm:w-auto"
            style={{ backgroundColor: 'hsl(var(--primary) / 0.1)' }}
          >
            {language === "zh" ? "开始回忆" : "Start Memory"}
          </a>
          <div className="flex flex-row gap-2 justify-between sm:justify-end w-full sm:w-auto">
            <a 
              href={`/viewer?exam=${encodeURIComponent(name)}&examDate=${encodeURIComponent(formattedDate)}&grade=${encodeURIComponent(grade)}${isInternational ? '&int=true' : ''}`}
              className="flex-1 sm:flex-initial text-sm rounded-lg px-4 py-1.5 transition-colors text-center backdrop-blur-sm flex justify-center items-center gap-2"
              style={{ 
                backgroundColor: 'hsl(var(--secondary) / 0.5)',
                color: 'hsl(var(--secondary-foreground))'
              }}
            >
              {language === "zh" ? "查看回忆" : "View Memories"}
              <VisitCount 
                type="exam" 
                examName={name}
                grade={grade}
                examDate={formattedDate}
                className="text-xs opacity-80" 
              />
            </a>
            <button
              onClick={handleShare}
              className="flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-lg transition-all border-2 hover:scale-105 torch-button"
              style={{ 
                backgroundColor: 'hsla(38, 92%, 50%, 0.2)',
                color: 'hsl(38, 92%, 50%)',
                borderColor: 'hsla(38, 92%, 50%, 0.3)',
                boxShadow: '0 4px 10px 0 hsla(38, 92%, 50%, 0.25)'
              }}
              aria-label={language === "zh" ? "分享" : "Share"}
            >
              <Share2 className="h-4 w-4" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
} 